<template>
	<view class="worship_content" :style="{ marginTop: navHeight ? navHeight + 'px' : '200rpx' }">
		<view class="header display_flex">
			<view class="worship_tab">
				<up-tabs
					:current="currentTab"
					lineWidth="48rpx"
					lineHeight="6rpx"
					:activeStyle="{ color: '#524630', fontSize: '32rpx', lineHeight: '44rpx' }"
					:inactiveStyle="{ color: '#8E775B', fontSize: '28rpx', lineHeight: '40rpx' }"
					itemStyle="font-weight: 500;margin-bottom:25rpx;width:80rpx;"
					lineColor="#524630"
					:list="tablist"
					@click="clickTab"
				></up-tabs>
			</view>
			<view style="position: relative; margin-top: -20rpx">
				<badge :unreadMessagesNumber="unreadMessagesNumber"></badge>
				<image
					@click="goUrl('/subPages/home/message')"
					src="http://112.124.50.179:8888/imgs/worship/mess.png"
					mode=""
				></image>
			</view>
		</view>
		<scroll-view
			scroll-y="true"
			:scroll-top="scrollTop"
			:style="{ height: scrollHeight + 'px' }"
			:scroll-with-animation="true"
		>
			<view style="padding: 48rpx 0">
				<view
					class="worship_item"
					v-for="(item, index) in currentList"
					:key="index"
					:id="'worship' + index"
				>
					<view class="worship_list">
						<view
							class="worship_list_item"
							v-for="(i, key) in item.children"
							@click="
								goUrl(
									`/subPages/worship/detail?item=` +
										JSON.stringify(i) +
										'&tab=' +
										tablist[currentTab].name
								)
							"
						>
							<image :src="i.peopleImage" mode=""></image>
							{{ i.peopleName }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, onBeforeMount } from 'vue';
import badge from '/components/badge/index.vue';
import WorshipApi from '@/API/worship';
import CommonApi from '@/API/commenApi';

const worshipApi = new WorshipApi();
const commonApi = new CommonApi();
const tablist = reactive([{}]);
const currentTab = ref(0); //默认
const scrollTop = ref(0);
const scrollHeight = ref(0);
const navHeight = getApp().globalData.navHeight;
const list = ref({}); //列表信息
const currentList = ref([]);
const unreadMessagesNumber = ref(0); //未读消息数量

onReady(() => {
	// #ifdef H5
	uni.createSelectorQuery()
		.select('.header')
		.boundingClientRect((res) => {
			scrollHeight.value =
				uni.getSystemInfoSync().windowHeight -
				res.height -
				uni.upx2px(200) -
				uni.upx2px(64);
		})
		.exec();
	// #endif
	// #ifdef MP-WEIXIN
	uni.createSelectorQuery()
		.select('.header')
		.boundingClientRect((res) => {
			scrollHeight.value =
				uni.getSystemInfoSync().screenHeight -
				getApp().globalData.navHeight -
				res.height -
				uni.upx2px(64);
		})
		.exec();
	// #endif

	getAllDenomination();
});

onShow(() => {
	if (uni.getStorageSync('peopleId')) {
		uni.removeStorage({
			key: 'peopleId'
		});
	}
	
	//获取消息未读数量
	getMessageNewCout();
});

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

/**
 * 获取消息未读数量
 */
const getMessageNewCout = async () => {
	let res = await commonApi.getMessageNewCout({ userId: uni.getStorageSync('userInfo').userId });
	if (res.code === 0) {
		console.log(res.data);
		unreadMessagesNumber.value = 0;
		res.data.unReadedInfo?.map((item) => {
			unreadMessagesNumber.value += item.count;
		});
	}
};

/**
 * 获取列表信息
 */
const getList = (allDenominationMap) => {
	let tempList = {};
	Object.keys(allDenominationMap).forEach((item) => {
		tempList[item] = [];
		Object.keys(allDenominationMap[item].denominationPeopleMap).forEach((i) => {
			tempList[item].push({
				title: i,
				children: allDenominationMap[item].denominationPeopleMap[i].peopleList
			});
		});
	});
	list.value = tempList;
};

/**
 * 获取所有祭拜信息
 */
const getAllDenomination = () => {
	worshipApi.getAllDenomination().then((res) => {
		if (res.code === 0) {
			//tab
			tablist.length = 0;
			res.data?.allDenominationName?.forEach((item, key) => {
				tablist[key] = {
					name: item
				};
			});
			//列表信息
			getList(res.data.allDenominationMap);
			currentList.value = list.value[tablist[currentTab.value].name];
		}
	});
};

/**
 * 切换tab
 */
const clickTab = (e) => {
	currentList.value = list.value[e.name];
	scrollTop.value = 0;
	currentTab.value = e.index;
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-image: url('http://112.124.50.179:8888/imgs/worship/worship_top.png');
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: rgb(250, 246, 234);
}

.worship_content {
	background: url('http://112.124.50.179:8888/imgs/worship/worship_bgc.png') repeat-y;
	background-size: 90%;
	background-color: rgb(250, 246, 234);
	background-position: center 150rpx;
	padding: 32rpx;
	border-radius: 32rpx 32rpx 0 0;

	.header {
		justify-content: space-between;
		align-items: center;

		.placeholderClass {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #969da3;
			line-height: 72rpx;
			font-style: normal;
			text-transform: none;
		}

		image {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.worship_item {
		padding-bottom: 32rpx;
		box-sizing: border-box;

		&:first-child {
			.worship_title {
				padding-top: 32rpx;
			}
		}

		.worship_title {
			height: 72rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #956b00;
			line-height: 72rpx;
			text-align: center;
			position: relative;
			margin-bottom: 32rpx;

			image {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 296rpx;
				height: 72rpx;
			}
		}

		.worship_list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-row-gap: 48rpx;

			.worship_list_item {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				white-space: nowrap;

				image {
					width: 144rpx;
					height: 144rpx;
					margin-bottom: 20rpx;
					border-radius: 50%;
				}
			}
		}
	}
}
</style>
